<template>
  <div class="login" id="loginBox">
    <div class="login-box">
      <div class="login-box-le">
        <img class="img-bg" src="../assets/imgs/login/i.png" alt="" />
      </div>
      <div class="login-box-ri">
        <h2>欢迎登录</h2>
        <form>
          <div class="each">
            <el-input
              class="user-name"
              placeholder="请输入账号"
              v-model="userName"
            >
              <template #prefix>
                <i class="user-name1"></i>
              </template>
            </el-input>
          </div>
          <div class="each">
            <el-input
              class="pass-word"
              placeholder="请输入密码"
              v-model="password"
              type="password"
              @keyup.enter="login"
            >
              <template #prefix>
                <i class="pass-word1"></i>
              </template>
            </el-input>
          </div>
          <!-- <div class="each ver-code-box">
            <el-input
              class="ver-code"
              placeholder="请输入验证码"
              v-model="verCode"
              maxlength="4"
              @keyup.enter="login"
            >
            </el-input>
            <div class="ver" @click="getverCode">
              <img :src="url" alt="" />
            </div>
          </div> -->
          <div class="each">
            <el-button type="primary" @click="login">登录</el-button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { userLogin } from "../assets/javascript/api/login.js";
export default defineComponent({
  name: "Home",
  data() {
    return {
      userName: "",
      password: "",
      myCanvas: "",
      url: "",
    };
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    async login() {
      var _this = this as any;
      if (!_this.userName) {
        _this.$message.warning("请输入账号");
        return;
      }
      if (!_this.password) {
        _this.$message.warning("请输入密码");
        return;
      }
      const res = await userLogin({
        password: this.password,
        username: this.userName,
      });
      const { data } = res;
      if (res.code == 200) {
        localStorage.setItem("UserName", data[0].accountName);
        _this.$router.push("/Index");
      }
    },
    initCanvas() {
      let that = this as any;
      var SEPARATION = 100,
        AMOUNTX = 50,
        AMOUNTY = 50;

      var container;
      var camera: any, scene: any, renderer: any;

      var particles: any,
        particle: any,
        count = 0;

      var mouseX = 0,
        mouseY = 0;

      var windowHalfX = window.innerWidth / 2;
      var windowHalfY = window.innerHeight / 2;

      init();
      animate();

      function init() {
        let THREE = that.$THREE;
        that.myCanvas = container = document.createElement("div");
        container.classList.add("fixed");
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          1,
          10000
        );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        particles = new Array();

        var PI2 = Math.PI * 2;
        var material = new THREE.ParticleCanvasMaterial({
          color: "#f3c7bf",
          program: function (context: any) {
            context.beginPath();
            context.arc(0, 0, 1, 0, PI2, true);
            context.fill();
          },
        });

        var i = 0;

        for (var ix = 0; ix < AMOUNTX; ix++) {
          for (var iy = 0; iy < AMOUNTY; iy++) {
            particle = particles[i++] = new THREE.Particle(material);
            particle.position.x = ix * SEPARATION - (AMOUNTX * SEPARATION) / 2;
            particle.position.z = iy * SEPARATION - (AMOUNTY * SEPARATION) / 2;
            scene.add(particle);
          }
        }

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        document.addEventListener("mousemove", onDocumentMouseMove, false);
        document.addEventListener("touchstart", onDocumentTouchStart, false);
        document.addEventListener("touchmove", onDocumentTouchMove, false);

        //

        window.addEventListener("resize", onWindowResize, false);
      }

      function onWindowResize() {
        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      //

      function onDocumentMouseMove(event: any) {
        mouseX = event.clientX - windowHalfX - 300;
        mouseY = event.clientY - windowHalfY - 500;
      }

      function onDocumentTouchStart(event: any) {
        if (event.touches.length === 1) {
          event.preventDefault();

          mouseX = event.touches[0].pageX - windowHalfX;
          mouseY = event.touches[0].pageY - windowHalfY;
        }
      }

      function onDocumentTouchMove(event: any) {
        if (event.touches.length === 1) {
          event.preventDefault();

          mouseX = event.touches[0].pageX - windowHalfX;
          mouseY = event.touches[0].pageY - windowHalfY;
        }
      }

      //

      function animate() {
        requestAnimationFrame(animate);

        render();
      }

      function render() {
        camera.position.x += (mouseX - camera.position.x) * 0.05;
        camera.position.y += (-mouseY - camera.position.y) * 0.05;
        camera.lookAt(scene.position);

        var i = 0;

        for (var ix = 0; ix < AMOUNTX; ix++) {
          for (var iy = 0; iy < AMOUNTY; iy++) {
            particle = particles[i++];
            particle.position.y =
              Math.sin((ix + count) * 0.3) * 50 +
              Math.sin((iy + count) * 0.5) * 50;
            particle.scale.x = particle.scale.y =
              (Math.sin((ix + count) * 0.3) + 1) * 2 +
              (Math.sin((iy + count) * 0.5) + 1) * 2;
          }
        }

        renderer.render(scene, camera);

        count += 0.1;
      }
    },
  },
  beforeRouteLeave(to, from, next): void {
    // ...
    this.myCanvas && document.body.removeChild((this as any).myCanvas);
    next();
  },
});
</script>
<style scoped lang="less">
.login {
  width: 100vw;
  height: 100vh;
  background: url("../assets/imgs/login/bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 1050px;
    height: 588px;
    display: flex;
    .login-box-le {
      .img-bg {
        width: 540px;
        height: 680px;
        position: relative;
        top: -30px;
        left: 50px;
      }
    }
    .login-box-ri {
      flex: 1;
      padding-top: 70px;
      text-align: center;
      background: #ffffff;
      box-shadow: 11px 16px 21px 0px rgba(217, 207, 207, 0.36);
      border-radius: 10px;
      h2 {
        font-weight: bold;
      }
      form {
        width: 448px;
        margin: 57px auto;
      }
    }
    .each {
      margin-bottom: 27px;
      /deep/.el-button {
        width: 100%;
        height: 50px;
        margin-top: 50px;
      }
    }
    .user-name {
      /deep/.el-input__inner {
        text-indent: 20px;
        padding-left: 30px;
        height: 50px;
        line-height: 50px;
      }
    }
    .user-name1 {
      background: url("../assets/imgs/login/u.png") no-repeat 0 0;
      background-size: 20px 24px;
      background-position: 15px 12px;
      text-indent: 20px;
      padding-left: 40px;
      height: 50px;
      line-height: 50px;
      display: inline-block;
    }
    .pass-word {
      /deep/.el-input__inner {
        text-indent: 20px;
        padding-left: 40px;
        height: 50px;
        line-height: 50px;
      }
    }
    .pass-word1 {
      background: url("../assets/imgs/login/p.png") no-repeat 0 0;
      background-size: 20px 24px;
      background-position: 15px 12px;
      text-indent: 20px;
      padding-left: 40px;
      height: 50px;
      line-height: 50px;
      display: inline-block;
    }
    .ver-code {
      /deep/.el-input__inner {
        width: 100%;
        background: url("../assets/imgs/login/v.png") no-repeat 0 0;
        background-size: 20px 24px;
        background-position: 15px 12px;
        text-indent: 20px;
        padding-left: 30px;
        height: 50px;
        line-height: 50px;
      }
    }
    .ver-code-box {
      display: flex;
      .ver {
        width: 120px;
        height: 48px;
        background: #ffffff;
        border: 1px solid #c81e1e;
        border-radius: 4px;
      }
    }
    /deep/.el-input__inner {
      color: #000;
    }
    /deep/.el-input__inner::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #999;
    }

    /deep/.el-input__inner::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #999;
    }

    /deep/.el-input__inner:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: #999;
    }
  }
}
</style>